<template>
	<view class="su-page" id="suPage" :class="{safeAreaInsetBottom:safeAreaInsetBottom}" :style="{background:bg}">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"su-page",
		props:{
      // 是否开启底部安全区适配
      safeAreaInsetBottom:{
        type:Boolean,
        default:true
      },
      bg:{
        type:String,
        default:'rgba(255,255,255,0)'
      }
    },
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.su-page{
		min-height: 100vh;
    box-sizing: border-box;
    &.safeAreaInsetBottom{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
	}
</style>
